<template>
  <i
    v-if="data.sourceItem"
    class="fa-widget-source-icon"
    :class="[loading ? 'is-loading el-icon-loading' : data.sourceItem.icon, !loading && isError && 'is-error']"
  />
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { Widget } from '@/models'

export default defineComponent({
  name: 'WidgetSourceIcon',

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    }
  },

  setup(props) {
    /** 加载中 */
    const loading = computed(() => {
      const widget = props.data
      return widget.isUse && !!widget.viewer?.source.loading
    })

    /** 错误：填写中、未填写值 */
    const isError = computed(() => {
      const widget = props.data
      return widget.isUse && !widget.hasFillValue
    })

    return {
      /** 加载中 */
      loading,

      /** 错误：填写中、未填写值 */
      isError
    }
  }
})
</script>

<style lang="scss">
.fa-widget-source-icon {
  display: inline-block;
  color: $color-success;
  font-size: 16px;

  &.is-loading {
    color: $color-text-regular;
  }

  &.is-error {
    color: $color-danger;
  }
}
</style>
